<template>
  <div class="setting">
    <el-tabs value="first" type="border-card">
      <el-tab-pane label="基地址配置" name="first">
        <div class="baseUrLSetting">
          <div>
            <el-button type="warning" @click="addBaseUrl">添加</el-button>
            <el-button type="primary" @click="saveBaseUrlList">保存</el-button>
          </div>
        </div>
        <div v-for="(item,index) in urlData.baseUrlList" :key="index" class="baseUrLSetting">
          <div>
            <el-radio v-model="urlData.index" :label="index" @change="radioChange">全局请求URL：</el-radio>
          </div>
          <div>
            <el-input v-model="urlData.baseUrlList[index]" placeholder="baseUrL" clearable style="width: 600px" />
          </div>
          <div>
            <el-popconfirm
              title="确定删除当前请求头吗？"
              @confirm="deleteBaseUrl(index)"
            >
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="请求头设置" name="second">
        <div class="tokenSetting">
          <div class="tokenSettingBody">
            <div class="bodyFirst" style="background-color: #d3dce6;border-left: #5a5e66 solid 1px">
              <span><h4>请求头名称</h4></span>
            </div>
            <div class="bodySecond" style="background-color: #d3dce6;border-left: #5a5e66 solid 1px">
              <span><h4>请求头内容</h4></span>
            </div>
            <div class="bodyThird" style="border-left: #5a5e66 solid 1px">
              <el-button type="warning" @click="addHand">添加请求头</el-button>
              <el-button type="primary" @click="saveHand">保存</el-button>
            </div>
          </div>
        </div>
        <div class="tokenSetting">
          <div v-for="(header,index) in headers" :key="index" class="tokenSettingBody">
            <div class="bodyFirst">
              <el-input
                v-model="header.name"
                placeholder="请求头名称"
                clearable
              />
            </div>
            <div class="bodySecond">
              <el-input
                v-model="header.val"
                placeholder="请求头内容"
                clearable
              />
            </div>
            <div class="bodyThird">
              <el-popconfirm
                title="确定删除当前请求头吗？"
                @confirm="deleteHand(index)"
              >
                <el-button slot="reference" type="danger">删除</el-button>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { saveHeaders, getHeaders, saveBaseUrl, getBaseUrlList, saveBaseUrlList } from '@/utils/requestHeaderUtil'
import { saveTestBaseUrl, saveTestBaseUrlList } from '@/utils/requestTestHeaderUtil'

export default {
  name: 'Index',
  data() {
    return {
      baseUrL: '',
      urlData: {
        index: 0,
        baseUrlList: ['']
      },
      headers: [
        {
          name: '',
          val: ''
        }
      ]
    }
  },
  mounted() {
    this.getHands()
    this.getBaseUrlList()
  },
  methods: {
    getHands() {
      const item = getHeaders()
      if (item !== null) {
        this.headers = item
      }
    },
    getBaseUrlList() {
      const item = getBaseUrlList()
      if (item !== null) {
        this.urlData = item
      }
    },
    addBaseUrl() {
      if (this.urlData.baseUrlList === undefined) {
        this.urlData.baseUrlList = ['']
      } else {
        this.urlData.baseUrlList.push('')
      }
    },
    saveBaseUrlList() {
      const baseUrl = this.urlData.baseUrlList[this.urlData.index]
      if (baseUrl !== undefined && baseUrl !== '') {
        this.saveBaseUrl(baseUrl)
      }
      saveBaseUrlList(JSON.stringify(this.urlData))
      saveTestBaseUrl(baseUrl)
      saveTestBaseUrlList(JSON.stringify(this.urlData))
      this.$message.success('变更成功')
    },
    radioChange(index) {
      this.urlData.index = index
      this.saveBaseUrlList()
    },
    deleteBaseUrl(index) {
      this.urlData.baseUrlList.splice(index, 1)
      this.saveBaseUrlList()
    },
    saveHand() {
      saveHeaders(this.headers)
      this.$message.success('保存成功')
    },
    addHand() {
      if (this.headers === undefined) {
        this.headers = [{ name: '', val: '' }]
      } else {
        this.headers.push({ name: '', val: '' })
      }
    },
    saveBaseUrl(baseUrl) {
      saveBaseUrl(baseUrl)
    },
    deleteHand(index) {
      this.headers.splice(index, 1)
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.setting {
  margin: 10px;
}

.baseUrLSetting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.tokenSettingBody {
  display: flex;
  text-align: center;
  flex-direction: row;
  margin: auto 10px;
  padding: 5px;
  justify-items: center;
  justify-content: center;
}

.bodyFirst {
  width: 20%;
  border-radius: 0;
}

.bodySecond {
  width: 50%;
  border-radius: 0;
}

.bodyThird {
  width: 20%;
  border-radius: 0;
}
</style>
